<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年04月19日 10:20:41
-->
<template>
  <div class="leftTree">
    <h4 class="title">{{this.$global.leftNavTitle}}</h4>
    <el-tree
      :data="data"
      node-key="id"
      default-expand-all
      @node-drop="handleDrop"
      draggable
      :allow-drop="allowDrop"
      :style="`background:${this.$global.bgColor}`"
    ></el-tree>
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）

export default {
  /**注册组件*/
  components: {},
  /**接受父组件传值*/
  props: {},
  name: "leftTree",
  data() {
    return {
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2",
              children: [
                {
                  id: 11,
                  label: "三级 3-2-1"
                },
                {
                  id: 12,
                  label: "三级 3-2-2"
                },
                {
                  id: 13,
                  label: "三级 3-2-3"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/

  watch: {},
  /**所有方法*/
  methods: {
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log(draggingNode, dropNode.label, dropType, ev);
    },

    allowDrop(moveNode, inNode, type) {
      // 同级拖动同级，禁止越级拖动  最多6级
      for (let i = 0; i < 6; i++) {
        if (
          moveNode.level == i &&
          inNode.level == i &&
          moveNode.parent.id == inNode.parent.id
        ) {
          return aa();
        }
      }
      // 四种情况
      function aa() {
        if (moveNode.nextSibling == undefined) {
          return type == "prev";
        } else if (inNode.nextSibling == undefined) {
          return type == "next";
        } else if (moveNode.nextSibling.id !== inNode.id) {
          return type == "prev";
        } else {
          return type == "next";
        }
      }
    },
  },
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/

  mounted() {},
  beforeCreate() {
    /**生命周期 - 创建之前*/
  },
  beforeMount() {
    /**生命周期 - 挂载之前*/
  },
  beforeUpdate() {
    /**生命周期 - 更新之前*/
  },
  updated() {
    /**生命周期 - 更新之后*/
  },
  beforeDestroy() {
    /**生命周期 - 销毁之前*/
  },
  destroyed() {
    /**生命周期 - 销毁完成*/
  },
  activated() {
    /**keep-alive组件激活时调用。仅针对keep-alive组件有效*/
  },
  deactivated() {
    /**keep-alive组件停用时调用。仅针对keep-alive组件有效*/
  }
};
</script>
<style scoped lang='scss'>
/* @import url(); 引入css类 */
.title {
  text-align: center;
}
</style>